<!--
 * @Author: xx
 * @Date: 2024-02-06 20:02:44
 * @LastEditors: Zhanghan
 * @LastEditTime: 2025-04-13 17:42:27
 * @Description: 
-->
<template>
  <view>
    地图组件

    <!-- :show-location="true" 将地图中心移置当前定位点，此时需设置地图组件 show-location 为true。 -->
    <map
      id="myMap"
      :longitude="116.397428"
      :latitude="39.90923"
      :scale="14"
      :markers="markers"
      @tap="handelMap"
      style="width: 100%; height: 300px;"
    >
    </map>
  </view>
</template>

<script setup lang="ts">
import styles from "./index.module.scss";
import Taro, { useDidShow } from "@tarojs/taro";
import { ref } from "vue";
import { IMG_ICON } from "@/conacts/imgpath";

const mapCtx = ref<any>(null); //地图示例

//从微信小程序基础库 3.3.4 版本开始，markers 中的每个标记点必须明确指定 width 和 height 属性，否则会报这个渲染层错误
const markers = ref([
  {
    id: 1,
    latitude: 39.90923,
    longitude: 116.397428,
    width: 30, // 必须：图标宽度，单位px
    height: 34,
    iconPath: IMG_ICON.MYLOCATION, // 必须：图标路径
  },
]); //地图标记

useDidShow(() => {
  mapCtx.value = Taro.createMapContext("myMap");
  setTimeout(() => {
    mapCtx.value.moveToLocation();
  }, 1000);
});

const handelMap = async (e: any) => {
//   const { latitude, longitude } = e.detail;
  console.log("🚀 ~ handelMap ~ e:", e);
  // 调用腾讯地图逆地理编码 API
  try {
    // const res = await Taro.request({
    //   url: "https://apis.map.qq.com/ws/geocoder/v1/",
    //   data: {
    //     location: `${latitude},${longitude}`,
    //     key: "你的腾讯地图KEY", // 需申请
    //   },
    // });
    // const address = res.data.result.address; // 例如："北京市海淀区中关村大街"
    // console.log("点击位置的地名:", address);
    mapCtx.value.translateMarker({
      markerId: 1, // 对应 markers 的 id
      destination: {
        latitude: e.detail.latitude,
        longitude: e.detail.longitude,
      },
      duration: 200, // 动画时间（ms）
    });
  } catch (error) {
    console.error("获取地名失败:", error);
  }
};
</script>
